<template>
	<div>
		<!-- xpert导航栏 -->
		<xpertNavBar :statusTab="statusTab" />
		<!-- serch -->
		<div class="search">
			<div class="searchBot f f-a-c f-j-b">
				<div class="inpBox f f-a-c">
					<input type="text" class="inp" v-model="search" placeholder="Search.." name="" id="" />
					<div @click="goSearch" class="scheBtn f f-a-c f-j-c hand"><img src="/src/assets/sche.png" class="scheImg" alt="" /></div>
				</div>
				<div class="rigTab f f-a-c">
					<div class="rigTitle">Popular:</div>
					<div class="tabsTit">AIGC</div>
					<div class="tabsTit">Venture Capital</div>
					<div class="tabsTit">Career Pivot</div>
					<div class="tabsTit">Law</div>
				</div>
			</div>
		</div>
		<!-- tabs -->
		<div class="waiTabs">
			<div class="tabs f f-a-c f-j-b m-0-a">
				<div class="leftTabs">
					<el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
						<el-tab-pane label="IT" name="first"></el-tab-pane>
						<el-tab-pane label="Finance&investment" name="Finance"></el-tab-pane>
						<el-tab-pane label="Business" name="Business"></el-tab-pane>
						<el-tab-pane label="Legal" name="Legal"></el-tab-pane>
						<el-tab-pane label="Career development" name="Career"></el-tab-pane>
						<el-tab-pane label="Industrial insights" name="Industrial"></el-tab-pane>
						<el-tab-pane label="Life service" name="Life"></el-tab-pane>
						<el-tab-pane label="Art&design" name="design"></el-tab-pane>
					</el-tabs>
				</div>
				<div @mouseenter="showDrawer(1)" class="rigTu"><img src="/src/assets/serch/move.png" class="moveImg hand" alt="" /></div>
			</div>
			<!-- 弹出层 -->
			<div v-show="drawerShow" @click="removePop" class="mask">
				<div @mouseleave.stop="showDrawer(2)" class="maskBox animate-fadeInDown">
					<div class="maskBoxShow f f-a-c f-w-w">
						<div v-for="(item, index) in 30" @click.stop="sectList(item)" :key="index" class="maskItem hand">Finance&investment</div>
					</div>
				</div>
			</div>
		</div>
		<!-- 第一个------------------------ -->
		<!-- 47 experts found -->
		<div class="found">
			<div class="foundTop f f-a-c f-j-b">
				<div class="foundLrft">30 Clubs</div>
				<div class="foundRig f f-a-c">
					<div class="sort">Sort by</div>
					<el-dropdown max-height="200" trigger="click">
						<span class="el-dropdown-link hand">
							Price<el-icon class="el-icon--right"><arrow-down /></el-icon>
						</span>
						<template #dropdown>
							<el-dropdown-menu>
								<el-dropdown-item>Action 1</el-dropdown-item>
								<el-dropdown-item> Action 2 </el-dropdown-item>
								<el-dropdown-item>Action 3</el-dropdown-item>
								<el-dropdown-item>Action 4</el-dropdown-item>
								<el-dropdown-item>Action 5</el-dropdown-item>
							</el-dropdown-menu>
						</template>
					</el-dropdown>
				</div>
			</div>
			<!-- Results on KnowClub -->
			<div class="knowClub">
				<!-- <div class="knowClubTit">Results on KnowClub</div> -->
				<div class="knowClubBot f f-a-c f-w-w">
					<div v-for="(item, index) in 6" :key="index" class="knowClubItem">
						<div class="knowImgBox"><img src="/src/assets/tou.png" alt="" /></div>
						<div class="count f f-a-c f-j-b">
							<div class="f f-a-c">
								<img @click.stop="goProfile(item)" src="/src/assets/tou.png" class="hand avart" alt="" />
								<div class="name">
									<div class="budgt o-f-1">Budget outlook</div>
									<div class="budgid f f-a-c">
										David Theroux
										<div class="span">1k fans</div>
									</div>
								</div>
							</div>
							<!-- <div class="btn">Join</div> -->
							<div class="btn hand" :class="{ activ: index == 1 }">Joined</div>
						</div>
					</div>
				</div>
				<div class="more boxShow hand">More</div>
			</div>
		</div>
		<!-- 第二个------------------------ -->
		<div class="found">
			<div class="foundTop f f-a-c f-j-b">
				<div class="foundLrft">Popular club</div>
			</div>
			<!-- Results on KnowClub -->
			<div class="knowClub">
				<!-- <div class="knowClubTit">Results on KnowClub</div> -->
				<div class="knowClubBot f f-a-c f-w-w">
					<div v-for="(item, index) in 6" :key="index" class="knowClubItem">
						<div class="knowImgBox"><img src="/src/assets/tou.png" alt="" /></div>
						<div class="count f f-a-c f-j-b">
							<div class="f f-a-c">
								<img @click.stop="goProfile(item)" src="/src/assets/tou.png" class="hand avart" alt="" />
								<div class="name">
									<div class="budgt o-f-1">Budget outlook</div>
									<div class="budgid f f-a-c">
										David Theroux
										<div class="span">1k fans</div>
									</div>
								</div>
							</div>
							<!-- <div class="btn">Join</div> -->
							<div class="btn hand" :class="{ activ: index == 1 }">Joined</div>
						</div>
					</div>
				</div>
				<div class="more boxShow hand">More</div>
			</div>
		</div>
		<!-- 第三个------------------------ -->
		<div class="found">
			<div class="foundTop f f-a-c f-j-b">
				<div class="foundLrft">Suggest for you</div>
			</div>
			<!-- Results on KnowClub -->
			<div class="knowClub">
				<!-- <div class="knowClubTit">Results on KnowClub</div> -->
				<div class="knowClubBot f f-a-c f-w-w">
					<div v-for="(item, index) in 6" :key="index" class="knowClubItem">
						<div class="knowImgBox"><img src="/src/assets/tou.png" alt="" /></div>
						<div class="count f f-a-c f-j-b">
							<div class="f f-a-c">
								<img @click.stop="goProfile(item)" src="/src/assets/tou.png" class="hand avart" alt="" />
								<div class="name">
									<div class="budgt o-f-1">Budget outlook</div>
									<div class="budgid f f-a-c">
										David Theroux
										<div class="span">1k fans</div>
									</div>
								</div>
							</div>
							<!-- <div class="btn">Join</div> -->
							<div class="btn hand" :class="{ activ: index == 1 }">Joined</div>
						</div>
					</div>
				</div>
				<div class="more boxShow hand">More</div>
			</div>
		</div>
		<!-- 下面 -->
		<div class="work m1280">How does KnowClub work?</div>
		<!-- How does KnowClub work? -->
		<!-- countList -->
		<div class="countList m1280 f f-w-w f-a-c">
			<div v-for="(item, index) in 4" :key="index" class="countItem f f-a-c">
				<div class="lefImg"><img src="/src/assets/imgList/4.png" alt="" /></div>
				<div class="rightBox">
					<div class="topName">Math Club</div>
					<div class="xiaoName">Math is Fun</div>
					<div class="count">
						laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis
					</div>
					<div class="time f f-a-c f-j-b">
						<span>09/07/2023</span>
						<span class="hand">More</span>
					</div>
				</div>
			</div>

			<div style="margin-bottom: 50px; margin-top: 30px" class="more boxShow hand">More</div>
		</div>
		<xpertTabbar />
	</div>
</template>

<script setup>
	import { ElMessage } from "element-plus";
	import { ArrowDown, Check, CircleCheck, CirclePlus, CirclePlusFilled, Plus } from "@element-plus/icons-vue";
	import xpertTabbar from "@/components/tabBar/xpertTabbar.vue";
	import xpertNavBar from "@/components/navBar/xpertNavBar.vue";
	import router from "@/router/index.js";
	import ButtonDiffuse from "@/components/Button/ButtonDiffuse.vue";
	import { ref, onMounted } from "vue";
	const activeName = ref("first");
	let statusTab = ref(1);
	let drawerShow = ref(false);
	onMounted(() => {
		window.addEventListener("scroll", handleScroll);
	});
	const open = ref(false);
	const showDrawer = num => {
		drawerShow.value = !drawerShow.value;
	};
	// tabs
	const handleClick = (tab, e) => {
		console.log(tab.index, e, "123456");
	};
	// 点击去个人主页
	const goUserInfo = () => {
		router.push("/PersonalHome");
	};
	// 切换分页
	const sizeChange = e => {
		console.log(e, "1111111");
	};
	const goProfile = e => {
		router.push("/PersonalHomepage");
	};
	// 当移除时
	const removePop = () => {
		drawerShow.value = false;
	};
	// 这个是当头部导航栏滑倒下面时给tabr加个背景
	const handleScroll = () => {
		const scrollTop = document.documentElement.scrollTop;
		if (scrollTop > 0) {
			statusTab.value = 2;
		} else {
			statusTab.value = 1;
		}
	};
</script>
<style scoped>
	@import "./index.scss";
</style>
